<template>
    <view class="content">
        
		<button>发帖</button>
		<div class="book-item" v-for="(item, index) in cardList" :key="index">
			<view class="left-info">
				</br>
				<image :src="item.headurl" class="img-wrap "></image>
				<view class="head-name">{{item.name}}</view>
			</view>
			
			  <div class="content-item">
				<p class="book-author">{{item.goods}}</p>
				
				<p class="book-gist">{{item.messge}}</p>
			  </div>
			  <p style="height: 10px; color: #994309"></p>
			</div>
		</div>
		
	</view>
	
	
 </template>

<script>
	
	import carousel from '@/components/vear-carousel/vear-carousel'
	
	 import mSearch from '@/components/mehaotian-search/mehaotian-search.vue';
	 export default {
	    components: {
	        mSearch,
			 carousel
	    },
	    data() {
	        return {
	            val0: '',
	            val1: '',
	            val2: '',
	            val3: '',
	            placeholder:'动态占位内容',
				
				cardList: [
					{
					 url:'http://img10.360buyimg.com/n2/s270x270_jfs/t1/136288/20/2122/107160/5ee49fc3E9c2295f7/217d9cf371ed2cf9.jpg!q70.dpg',
					 headurl:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1714922572,212700688&fm=26&gp=0.jpg',
					 id:4,
					 goods:"小明",
					 messge:"猫是善于攀爬跳跃的动物，它的体内各种器官的平衡功能比其它动物要完善，当它从高处跳下来时，身体失去平衡，神经系统会迅速的指挥骨骼肌以最快的速度运动，将失去平衡的身体调整到正常的位置。"
					},	{
					 url:'http://img10.360buyimg.com/n2/s270x270_jfs/t1/136288/20/2122/107160/5ee49fc3E9c2295f7/217d9cf371ed2cf9.jpg!q70.dpg',
					 id:4,
					 headurl:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1714922572,212700688&fm=26&gp=0.jpg',
					 
					 goods:"小明",
					 messge:"猫是善于攀爬跳跃的动物，它的体内各种器官的平衡功能比其它动物要完善，当它从高处跳下来时，身体失去平衡，神经系统会迅速的指挥骨骼肌以最快的速度运动，将失去平衡的身体调整到正常的位置。"
					},	{
					 url:'http://img10.360buyimg.com/n2/s270x270_jfs/t1/136288/20/2122/107160/5ee49fc3E9c2295f7/217d9cf371ed2cf9.jpg!q70.dpg',
					 id:4,
					 headurl:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1714922572,212700688&fm=26&gp=0.jpg',
					 
					 goods:"小明",
					 messge:"猫是善于攀爬跳跃的动物，它的体内各种器官的平衡功能比其它动物要完善，当它从高处跳下来时，身体失去平衡，神经系统会迅速的指挥骨骼肌以最快的速度运动，将失去平衡的身体调整到正常的位置。"
					},	{
					 url:'http://img10.360buyimg.com/n2/s270x270_jfs/t1/136288/20/2122/107160/5ee49fc3E9c2295f7/217d9cf371ed2cf9.jpg!q70.dpg',
					 id:4,
					 headurl:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1714922572,212700688&fm=26&gp=0.jpg',
					 
					 goods:"小明",
					 messge:"猫是善于攀爬跳跃的动物，它的体内各种器官的平衡功能比其它动物要完善，当它从高处跳下来时，身体失去平衡，神经系统会迅速的指挥骨骼肌以最快的速度运动，将失去平衡的身体调整到正常的位置。"
					},	{
					 url:'http://img10.360buyimg.com/n2/s270x270_jfs/t1/136288/20/2122/107160/5ee49fc3E9c2295f7/217d9cf371ed2cf9.jpg!q70.dpg',
					 id:4,
					 headurl:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1714922572,212700688&fm=26&gp=0.jpg',
					 
					 goods:"小明",
					 messge:"猫是善于攀爬跳跃的动物，它的体内各种器官的平衡功能比其它动物要完善，当它从高处跳下来时，身体失去平衡，神经系统会迅速的指挥骨骼肌以最快的速度运动，将失去平衡的身体调整到正常的位置。"
					},	{
					 url:'http://img10.360buyimg.com/n2/s270x270_jfs/t1/136288/20/2122/107160/5ee49fc3E9c2295f7/217d9cf371ed2cf9.jpg!q70.dpg',
					 id:4,
					 headurl:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1714922572,212700688&fm=26&gp=0.jpg',
					 
					 goods:"小明",
					 messge:"猫是善于攀爬跳跃的动物，它的体内各种器官的平衡功能比其它动物要完善，当它从高处跳下来时，身体失去平衡，神经系统会迅速的指挥骨骼肌以最快的速度运动，将失去平衡的身体调整到正常的位置。"
					},	{
					 url:'http://img10.360buyimg.com/n2/s270x270_jfs/t1/136288/20/2122/107160/5ee49fc3E9c2295f7/217d9cf371ed2cf9.jpg!q70.dpg',
					 id:4,
					 headurl:'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1714922572,212700688&fm=26&gp=0.jpg',
					 
					 goods:"小明",
					 messge:"猫是善于攀爬跳跃的动物，它的体内各种器官的平衡功能比其它动物要完善，当它从高处跳下来时，身体失去平衡，神经系统会迅速的指挥骨骼肌以最快的速度运动，将失去平衡的身体调整到正常的位置。"
					},
					
				],
				startNum: 1
				
	        };
	    },
	
	    methods: {
	        search(e, val) {
	            console.log(e, val);
	            this['val'+val] = e;
	        },
			 selectedBanner(item, index) {
			                console.log('🥒', item, index)
			            },
			getCard() {
				/* that.cardList = */ 
			},
	    }
	 };
	 
</script>

<style scoped >
	.img-wrap {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				overflow: hidden;
	
				.img {
					width: 100%;
				}
			}
			.left-info {
				display: flex;
				align-items: center;
			
				.img-wrap {
					width: 80rpx;
					height: 80rpx;
					overflow: hidden;
					border-radius: 50%;
			
					.avatar {
						width: 100%;
						height: 80rpx;
					}
				}
			
				.head-name {
					padding-left: 40rpx;
					color: #666666;
					font-size: 32rpx;
				}
			}
			
	 .book-item {
	      display: flex;
	      height: 20vh;
	      width: 100vw;
		  margin-top: 1vh;
	      background: white;
	    }
	.book-author {
	      overflow : hidden;
	      text-overflow: ellipsis;
	      display: -webkit-box;
		  margin-top: 4vh;
	      -webkit-line-clamp: 3;
	      -webkit-box-orient: vertical
	    }
	.book-gist {
	  overflow : hidden;
	  text-overflow: ellipsis;
	  display: -webkit-box;
	  margin-top: 1vh;
	  -webkit-line-clamp: 5;
	  -webkit-box-orient: vertical
	}
	.home-hot-book-img {
	      width: 42vw;
		  height: 15vh;
		  margin-top: auto;
		  margin-bottom: auto;
	 }
    .book-item {
          display: flex;
          height: 20vh;
          width: 100vw;
          background: white
        }
	.content-item{
		margin-top: 3vh;
		margin-left: 2vw;
	} 	
</style>
